<template>
<div class="use-broadcast-channel">
  <div class="use-broadcast-channel">
    <input type="text" v-model="message">
  </div>
  <div>
    <button @click="sendMessage">发送</button>
  </div>
  <div>
    <p>是否支持：{{ isSupported }}</p>
    <p>错误：{{ error }}</p>
    <p>收到数据：{{ data }}</p>
  </div>
</div>
</template>
<script setup lang="ts">
import {useBroadcastChannel} from "@vueuse/core";
import {ref} from "vue";

defineOptions({
  name: "UseBroadcastChannel"
})

const message = ref<string>('')
const { isSupported, data, post, error } = useBroadcastChannel({ name: 'test-channel' })

const sendMessage = () => post(message.value)
</script>
<style scoped lang="css">
.use-broadcast-channel {

}
</style>
